<#include "/common/layout.html">
<@body>
<body class="gray-bg">
	<div class="wrapper">
		<section class="content">
			<div class="row">
				<div class="col-xs-12">
					<div class="box">
						<div class="form-inline">
							<div class="box-header">
								<#if shiro.hasPermission("addFile")>
								<div class="input-group">
									<button id="upload-container" type="button" class="btn btn-sm btn-primary">
										<i class="fa fa-upload" aria-hidden="true"></i> 上传文件
									</button>
									<button id="picker" class="display-none">点击上传文件</button>
								</div>
								</#if>
								<#if shiro.hasPermission("deleteFile")>
								<div class="input-group">
									<a class="btn btn-sm btn-danger" delete-batch-url="/system/sysfile/delete" ><i class="fa fa-remove"></i> 批量删除</a>
								</div>
								</#if>
								<div class="input-group input-group-sm">
									<input type="text" name="search_value" id="search_value" class="form-control" placeholder="名称查询">
									<div class="input-group-btn">
										<a href="javascript:;" id="search_data" class="btn btn-default" ><i class="fa fa-search"></i> 搜索</a>
										<a href="javascript:;" id="search_refresh" class="btn btn-default"><i class="fa fa-refresh"></i> 重置</a>
									</div>
								</div>
								<div class="input-group">
									<a class="btn btn-sm btn-primary dialog" href="javascript:void(0);" data-title="文件存储配置" data-url="/system/sysfile/setStorage" title="编辑">
										<i class="fa fa-cogs" aria-hidden="true"></i> 文件存储设置
									</a>
								</div>
							</div>
						</div>
						<div class="box-body">
							<table id="file_initTable" class="table table-bordered table-hover"></table>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
</body>
</@body>
<script>
	$(function(){
		initTable();
		$('#upload-container').click(function(event) {
			$("#picker").find('input').click();
		});
		var uploader = WebUploader.create({
			auto: true,// 选完文件后，是否自动上传。
			server: '/system/sysfile/upload',// 文件接收服务端。
			dnd: '#upload-container',
			pick: '#picker',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
			multiple: true, // 选择多个
			chunked: true,// 开起分片上传。
			threads: 5, // 上传并发数。允许同时最大上传进程数。
			method: 'POST', // 文件上传方式，POST或者GET。
			fileSizeLimit: 1024*1024*100*100, //验证文件总大小是否超出限制, 超出则不允许加入队列。
			fileSingleSizeLimit: 1024*1024*100, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
			fileVal:'file', // [默认值：'file'] 设置文件上传域的name。
		});
		uploader.on('fileQueued', function(file) {
			console.log(file.name);
		});
		uploader.on('uploadProgress', function(file, percentage) {
			console.log(percentage * 100 + '%');
		});
		uploader.on('uploadSuccess', function(file, response) {
			layer.msg("上传成功");
		});
		uploader.on('uploadError', function(file) {
			layer.msg("上传失败");
		});
		uploader.on('uploadComplete', function(file) {
			data_oTable.draw();
		});
	}); 
	var query_data = {
		search: ''
	}
	//搜索
	$("#search_data").off().on("click", function() {
		query_data.search = $("#search_value").val();
		reloadTable();
	});
	//重置
	$("#search_refresh").off().on("click", function() {
		query_data.search = "";
		$("#search_value").val("");
		reloadTable();
	});
	//重新加载表格
	function reloadTable() {
		var oSetting = data_oTable.settings()[0];
		oSetting.ajax.data = query_data;
		data_oTable.draw();
	}
	//渲染表格
	function initTable() {
		var options = {
			id: "file_initTable",
			ajax: {
				url: "/system/sysfile/listPage",
				type: "POST",
				data: query_data,
			},
			headerCallback: function(e, a, t, n, s) {
				e.getElementsByTagName("th")[0].innerHTML = '<label class="m-checkbox"><input type="checkbox" class="minimal m-group-checkable" value="root"></label>';
				$(e.getElementsByTagName("th")).parent().css("background-color", "#f7f7fa");
			},
			columnDefs: [{
				targets: 0,
				width: "30px",
				orderable: !1,
				render: function(e, a, t, n) {
					return '<label class="m-checkbox"><input type ="checkbox" class="minimal m-checkable" value="' + t.fileId + '"></label>';
				}
			},{
				targets: 1,
				title: "行号",
				orderable: !1,
				render: function(e, a, t, n) {
					return n.row+1;
				}
			},{
				targets: 2,
				title: "文件",
				orderable: !1,
				render: function(e, a, t, n) {
					return $.table.imageSquareView(t.fileUrl);
				}
			},{
				targets: 3,
				title: "文件名",
				orderable: !1,
				render: function(e, a, t, n) {
					if (t.originalName != null) {
						return t.originalName;
					} else {
						return "";
					}
				}
			},{
				targets: 4,
				title: "文件类型",
				orderable: !1,
				render: function(e, a, t, n) {
					if (t.fileType != null) {
						return t.fileType;
					} else {
						return "";
					}
				}
			},{
				targets: 5,
				title: "路径",
				orderable: !1,
				render: function(e, a, t, n) {
					if (t.fileUrl != null) {
						return t.fileUrl;
					} else {
						return "";
					}
				}
			},{
				targets: 6,
				title: "操作",
				orderable: !1,
				render: function(e, a, t, n) {
					var html = '';
						html += '<div>'
						<#if shiro.hasPermission("deleteFile")>
							html += ' <a class="btn btn-danger btn-xs" delete-url="/system/sysfile/delete" data-id="'+ t.fileId +'"><i class="fa fa-trash"></i>删除</a>'
						</#if>
						html += '</div>';
					return html;
				}
			}]
		};
		//渲染表格
		data_oTable = $.table.init(options);
	}
</script>